<template>
  <div class="container" v-show="object.isStatus">
    <div class="cont">
      <h1>你确定要删除我么</h1>
      <div>
        <span v-for="(value, index) in arr" :key="value" @click="change(index)">{{value}}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      object: {
        isStatus: false
      },
      arr: ['取消', '确定']
    }
  },
  beforeCreate () {
    // $on接收
    this.$bus.$on('value', (value) => {
      this.object.isStatus = true
      this.object.value = value
    })
  },
  methods: {
    change (index) {
      if (index === 1) {
        // $emit传出
        this.$bus.$emit('change', this.object.value)
      }
      this.object.isStatus = false
    }
  }
}
</script>

<style scoped lang="scss">
  .container{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(128, 128, 128, 0.5);
    z-index: 999;
    .cont{
      width: 70%;
      height: 20%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      h1{
        line-height: 54px;
        text-align: center;
      }
      div{
        font-size: 0;
        span{
          width: 50%;
          display: inline-block;
          font-size: 14px;
          border: 1px solid #eee;
          box-sizing: border-box;
          text-align: center;
          line-height: 40px;
        }
      }
    }
  }
</style>
